<template>
  <el-dialog
    :destroy-on-close="false"
    :show-close="false"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="362"
    center
  >
    <div class="cooperation-dialog">
      <img class="close" @click="close" src="~/assets/img/close.png" alt="" />
      <div class="top">
        <img class="n-logo" src="~/assets/img/bbx.png" alt="" />
        <div class="right">
          <div class="n-title">犀牛伙伴</div>
          <div class="n-desc">
            Hi-合作洽谈，广告投放、反馈建议、投稿求职任何问题均可反馈
          </div>
        </div>
      </div>
      <!-- <div class="tabs">
        <div class="tab">
          <img class="icon" src="~/assets/img/wx.png" alt="" />
          微信
        </div>
        <div class="tab">
          <img class="icon" src="~/assets/img/qq.png" alt="" />
          QQ
        </div>
      </div> -->
      <div class="tabs">
        <el-radio-group fill="#32C7AA" v-model="active" size="large">
          <el-radio-button
            style="width: 130px"
            v-for="(row, i) in tabList"
            :key="i"
            :label="row.label"
            :value="row.value"
          />
        </el-radio-group>
      </div>

      <div class="code">
        <img src="~@/assets/img/qrcode.jpg" alt="" />
      </div>
      <div class="wxh">
        <span>扫描上方微信号：</span>
        <span>uisdc5678</span>
      </div>
      <div class="feedback">领取犀牛最新推广案例和行业资源</div>
    </div>
  </el-dialog>
</template>

<script setup>
const dialogVisible = ref(false);
const active = ref("wx");
const tabList = [
  {
    label: "微信",
    value: "wx",
  },
  {
    label: "QQ",
    value: "qq",
  },
];
const close = () => {
  dialogVisible.value = false;
};
const show = () => {
  dialogVisible.value = true;
};
defineExpose({
  close,
  show,
});
</script>

<style lang="scss" scoped>
.cooperation-dialog {
  background: #ffffff;
  border-radius: 10px;
  padding: 16px 20px 14px 20px;
  position: relative;
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
  .top {
    display: flex;
    .n-logo {
      width: 42px;
      height: 42px;
    }
    .right {
      margin-top: 4px;
      margin-left: 6px;
      .n-title {
        height: 28px;
        font-size: 20px;
        font-weight: 400;
        text-align: LEFT;
        color: #333333;
        line-height: 23px;
        margin-bottom: 6px;
      }
      .n-desc {
        height: 36px;
        font-size: 13px;
        font-weight: 500;
        text-align: LEFT;
        color: #888888;
        line-height: 15px;
      }
    }
  }
  .tabs {
    width: 100%;
    display: flex;
    margin: 20px auto;
    justify-content: center;
    .tab {
      width: 50%;
      height: 40px;
      background: #ccc;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }
    }
  }
  .code {
    width: 236px;
    height: 236px;
    margin: 20px auto 10px auto;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .wxh {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
    span:first-child {
      height: 18px;
      font-size: 13px;
      font-weight: 500;
      text-align: LEFT;
      color: #748595;
      line-height: 15px;
    }
    span:last-child {
      height: 18px;
      font-size: 13px;
      font-weight: 500;
      text-align: LEFT;
      color: #ff7b39;
      line-height: 15px;
    }
  }
  .feedback {
    height: 18px;
    font-size: 13px;
    font-weight: 500;
    text-align: LEFT;
    color: #748595;
    line-height: 15px;
    text-align: center;
  }
}
</style>
